<template>
  <div class="app-container">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-brand">
        <h1>中央温控系统</h1>
        <p class="subtitle">智能空调管理平台</p>
      </div>
      <div class="nav-menu">
        <button 
          v-if="hasPermission('room')"
          @click="switchView('room')" 
          :class="['nav-btn', { active: currentView === 'room' }]"
        >
          客房控制
        </button>
        <button 
          v-if="hasPermission('admin')"
          @click="switchView('admin')" 
          :class="['nav-btn', { active: currentView === 'admin' }]"
        >
          管理监控
        </button>
        <button 
          v-if="hasPermission('frontdesk')"
          @click="switchView('frontdesk')" 
          :class="['nav-btn', { active: currentView === 'frontdesk' }]"
        >
          前台结账
        </button>
        <button 
          v-if="hasPermission('manager')"
          @click="switchView('manager')" 
          :class="['nav-btn', { active: currentView === 'manager' }]"
        >
          统计报表
        </button>
      </div>
      <div class="nav-user">
        <div class="user-info">
          <svg class="user-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
            <path d="M6 21C6 17.6863 8.68629 15 12 15C15.3137 15 18 17.6863 18 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <span class="user-name">{{ userName }}</span>
        </div>
        <button class="logout-btn" @click="onLogout">
          退出登录
        </button>
      </div>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
      <slot></slot>
    </main>

    <!-- 系统信息 -->
    <div class="system-info">
      <div class="info-item">
        <span class="label">总房间</span>
        <span class="value">{{ totalRooms }}</span>
      </div>
      <div class="info-item">
        <span class="label">最大服务数</span>
        <span class="value">{{ maxServiceObjects }}</span>
      </div>
      <div class="info-item">
        <span class="label">等待时长</span>
        <span class="value">{{ waitTime }}秒</span>
      </div>
      <div class="info-item">
        <span class="label">正在服务</span>
        <span class="value active">{{ servingCount }}</span>
      </div>
      <div class="info-item">
        <span class="label">等待队列</span>
        <span class="value waiting">{{ waitingCount }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
type ViewType = 'room' | 'admin' | 'frontdesk' | 'manager';

defineProps<{
  userName: string;
  currentView: ViewType;
  totalRooms: number;
  maxServiceObjects: number;
  waitTime: number;
  servingCount: number;
  waitingCount: number;
  hasPermission: (view: ViewType) => boolean;
  switchView: (view: ViewType) => void;
  onLogout: () => void;
}>();
</script>

<style scoped>
.app-container {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.navbar {
  background: #ffffff;
  border-bottom: 2px solid #f0f4f8;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  gap: 20px;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 100;
}

.nav-brand h1 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #1e293b;
  letter-spacing: 0.5px;
}

.subtitle {
  font-size: 13px;
  color: #64748b;
  font-weight: 400;
}

.nav-menu {
  display: flex;
  gap: 12px;
}

.nav-btn {
  padding: 10px 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}

.nav-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.nav-btn.active {
  background: #067ef5;
  color: #ffffff;
  border-color: #067ef5;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.user-icon {
  color: #64748b;
  flex-shrink: 0;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}

.logout-btn {
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #ef4444;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.logout-btn:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.main-content {
  flex: 1;
  padding: 24px 32px;
  background: #f9fafb;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 140px);
}

.system-info {
  background: #ffffff;
  padding: 16px 40px;
  border-top: 2px solid #f0f4f8;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 90;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.info-item .label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.info-item .value {
  font-size: 18px;
  color: #1e293b;
  font-weight: 600;
}

.info-item .value.active {
  color: #059669;
}

.info-item .value.waiting {
  color: #d97706;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 15px;
  }

  .nav-brand {
    text-align: center;
  }

  .nav-menu {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-btn {
    flex: 1;
    min-width: 120px;
  }

  .nav-user {
    width: 100%;
    justify-content: center;
  }

  .user-info {
    flex: 1;
    justify-content: center;
  }

  .main-content {
    padding: 15px;
    height: calc(100vh - 200px);
  }

  .system-info {
    gap: 15px;
  }
}
</style>

